<template>
	<view class="g-purchase-main g-main bottom">
		<view class="u-list f-bc-whilte f-mb7">
			<picker mode="selector" :range="purchaseTypes" @change="changeHandler($event, dataForm, 'purchase_type', purchaseTypes)">
				<view class="u-item arrow">
					<text class="key required">采购类型</text>
					<text class="value" :class="{ ph: !dataForm.purchase_type }">{{ dataForm.purchase_type || '请选择采购类型' }}</text>
				</view>
			</picker>
		</view>

		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border"><text class="key f-fw700">车辆类型</text></view>
			<view class="u-item arrow border-bottom sm-border" @tap="toPage('/pages/carType/carType')">
				<text class="key required">车型名称</text>
				<text class="value"></text>
			</view>
			<view class="u-item price border-bottom sm-border">
				<text class="key required">指导价</text>
				<input type="digit" class="value" placeholder="" placeholder-class="ph" />
			</view>
		</view>

			<block v-for="(item, index) in dataForm.car_list" :key="index">
		<view class="u-list f-bc-whilte f-mb7">
				<view class="u-item border-bottom sm-border">
					<text class="key f-fw650">车辆信息</text>
					<text class="f-fc-red f-mlauto" v-if="index !== 0" @tap="deleteCar(index)">删除</text>
				</view>
				<picker mode="selector" :range="outColorList" @change="changeHandler($event, item, 'out_color', outColorList)">
					<view class="u-item arrow border-bottom sm-border">
						<text class="key required">外饰颜色</text>
						<text class="value" :class="{ ph: !item.out_color }">{{ item.out_color || '请选择外饰颜色' }}</text>
					</view>
				</picker>
				<picker mode="selector" :range="intColorList" @change="changeHandler($event, item, 'int_color', intColorList)">
					<view class="u-item arrow border-bottom sm-border">
						<text class="key">内饰颜色</text>
						<text class="value" :class="{ ph: !item.int_color }">{{ item.int_color || '请选择内饰颜色' }}</text>
					</view>
				</picker>
				<view class="u-item a border-bottom sm-border">
					<text class="key required">台数</text>
					<view class="value"><numberbox v-model="item.num" :inputDisabled="true"></numberbox></view>
				</view>
				<view class="u-item price">
					<text class="key required">采购价格</text>
					<input type="digit" v-model="item.purchase_price" class="value" placeholder="请填写采购价格" placeholder-class="ph" />
				</view>
		</view>
		</block>

		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item" @tap="addCar">
				<text class="u-add-icon red f-mr15"></text>
				<text class="key">添加车辆信息</text>
			</view>
			<view class="u-item price border-bottom sm-border">
				<text class="key required">订单总金额</text>
				<input type="digit" v-model="dataForm.purchase_total" class="value" placeholder="请填写订单总金额" placeholder-class="ph" />
			</view>
			<view class="u-item price">
				<text class="key required">定金</text>
				<input type="digit" v-model="dataForm.first_price" class="value" placeholder="请填写定金" placeholder-class="ph" />
			</view>
		</view>

		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border"><text class="key f-fw650">供应商信息</text></view>
			<view class="u-item arrow border-bottom sm-border" @tap="toPage('/pages/selectSupplier/selectSupplier')">
				<text class="key required">供应商</text>
				<text class="value" :class="{ ph: !dataForm.shop_name }">{{ dataForm.shop_name || '请选择供应商' }}</text>
			</view>
			<view class="u-item empty">
				<text class="key">电话</text>
				<input type="number" v-model="dataForm.shop_phone" class="value" placeholder="请输入电话" placeholder-class="ph" />
			</view>
		</view>

		<view class="u-submit-btn-view"><button class="u-btn-primary f-fz16 f-fc-whilte">提 交</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataForm: {
				purchase_type: '', // 采购类型
				car_type: '', // 车型名称
				car_list: [
					{
						out_color: '', // 外饰颜色
						int_color: '', // 内饰颜色
						num: 1, // 台数
						purchase_price: '' // 采购价格
					}
				],
				purchase_total: '', // 采购总价
				first_price: '', // 定金
				shop_name: '', // 供应商名称
				shop_phone: '', // 供应商电话
				remark: '' // 备注
			},
			purchaseTypes: ['采购一', '采购二'],
			outColorList: ['白色', '黑色', '黄色'],
			intColorList: ['白色', '黑色', '黄色']
		};
	},
	onLoad() {
		uni.$on('selectCarType', type => {
			console.log('type');
			console.log(type);
		});
	},
	methods: {
		/**
		 * 改变处理函数
		 * */ 
		
		changeHandler(event, target, key, list) {
			target[key] = list[event.detail.value];
		},

		/**
		 * 添加车辆
		 * */

		addCar() {
			let car = {
				out_color: '', // 外饰颜色
				int_color: '', // 内饰颜色
				num: 1, // 台数
				purchase_price: '' // 采购价格
			};
			this.dataForm.car_list.push(car);
		},
		
		/**
		 * 删除车辆
		 * */ 
		
		deleteCar(index) {
			this.dataForm.car_list.splice(index, 1);
		} 
		
	},
	onUnload() {
		uni.$off('selectCarType');
	}
};
</script>

<style lang="scss" scoped>
.u-item {
	.key {
		font-weight: 550;
	}
}
.u-submit-btn-view {
	padding: 120rpx 100rpx 100rpx;
	.u-submit-btn {
		margin-top: 80rpx;
	}
}
</style>
